<template>
    <div>
        <!--style="margin-left:150px" -->
        <el-button type="primary" icon="edit" style="margin-left:100px" @click="judgeFormVisible = true">单个添加选择题</el-button>
        <el-button type="primary" icon="edit"  @click.native="addExcel">批量添加选择题</el-button>
        <el-button type="primary"   @click.native="uploadModel">下载批量录入模板</el-button>
        <el-input v-model="searchMessage" placeholder="请输入题目名称"
                  style="width:400px;margin-left:400px;margin-top:50px"></el-input>
        <el-button type="primary" icon="search" @click="search()">搜索</el-button>
        <!--分页列表-->
        <el-table
                :data="tableData4"
                style="width: 85% ; margin-top:50px; margin-left:100px;" element-loading-text="拼命加载中"
                v-loading="listLoading">
            <el-table-column prop="selectAddtimeStr" label="时间"></el-table-column>

            <el-table-column  label="难度星级">
                <template scope="ll">
                    <el-rate
                            v-model="ll.row.questionDifficulty"
                            disabled
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                </template>

            </el-table-column>
            <el-table-column prop="questionName" label="题目名称"></el-table-column>
            <el-table-column prop="scoreTypeName" label="测试类型"></el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template scope="scope">
                    <el-button @click.native.prevent="updateRow(scope.row)" type="info" size="small">
                        修改
                    </el-button>
                    <el-button @click.native.prevent="deleteRow(scope.row)" type="danger" size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--单个添加选择题-->
        <el-dialog title="选择题录入" v-model="judgeFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="100px" :rules="judgeFormRules" ref="editForm">

                <el-form-item prop="enterType" label="录入类型">
                    <el-select v-model="editForm.scoreType" placeholder="请选择" @change="enter">
                        <el-option
                                v-for="item in optionsTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="题目名称" prop="questionName">
                    <el-input v-model="editForm.questionName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectA" label="选择一">
                    <el-input v-model="editForm.selectA" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectB" label="选择二">
                    <el-input v-model="editForm.selectB" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectC" label="选择三">
                    <el-input v-model="editForm.selectC" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectD" label="选择四">
                    <el-input v-model="editForm.selectD" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectAnswer" label="答案">
                    <el-select v-model="editForm.selectAnswer" placeholder="请选择">
                        <el-option
                                v-for="item in optionsAnswer"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--2017/8/10 王娇 题型难度-->
                <el-form-item prop="questionDifficulty" label="题型难度">
                    <el-rate
                            v-model="editForm.questionDifficulty"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                </el-form-item>
                <el-form-item prop="selectPoint" label="分值">
                    <el-input v-model="editForm.selectPoint" type="text" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item prop="selectValues" label="章节测试类型" v-if="selectValues2">

                    <el-cascader
                            :options="options"
                            v-model="editForm.selectValues"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item prop="selectValues1" label="期末测试类型" v-if="selectValues1">

                    <el-select v-model="editForm.courseId" placeholder="请选择">
                        <el-option
                                v-for="item in optionsCourse"
                                :key="item.value"
                                :label="item.courseName"
                                :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="judgeFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>
            </div>
        </el-dialog>

        <!--上传excel-->
        <!--新增界面-->
        <el-dialog title="批量上传" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="100px" ref="addForm" :rules="judgeFormRules">
                <el-form-item prop="enterType2" label="录入类型">
                    <el-select v-model="addForm.scoreType" placeholder="请选择" @change="enter">
                        <el-option
                                v-for="item in optionsTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="selectValues" label="章节测试类型" v-if="selectValues2">
                    <el-cascader
                            :options="options"
                            v-model="editForm.selectValues"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item prop="selectValues" label="期末测试类型" v-if="selectValues1">
                    <el-select v-model="addForm.courseId" placeholder="请选择">
                        <el-option
                                v-for="item in optionsCourse"
                                :key="item.value"
                                :label="item.courseName"
                                :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传：">
                    <my-upload accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" buttonName="选择文件上传" @selectedFile="selectedFile"></my-upload>
                    <el-tag :type="file.type">{{file.fileName}}</el-tag>
                    <el-tag type="success">只支持07版本以上的Excel</el-tag>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="editLoading">确认提交</el-button>
            </div>
        </el-dialog>

        <!--修改内容-->
        <el-dialog title="修改内容" v-model="judgeFormVisible2" :close-on-click-modal="false">
            <el-form :model="updateeditForm" label-width="100px" :rules="judgeFormRules" ref="editForm">
                <el-form-item label="题目名称" prop="questionName">
                    <el-input v-model="updateeditForm.questionName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectA" label="选择一">
                    <el-input v-model="updateeditForm.selectA" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectB" label="选择二">
                    <el-input v-model="updateeditForm.selectB" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectC" label="选择三">
                    <el-input v-model="updateeditForm.selectC" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectD	" label="选择四">
                    <el-input v-model="updateeditForm.selectD" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="selectAnswer" label="答案">
                    <el-select v-model="updateeditForm.selectAnswer" placeholder="请选择">
                        <el-option
                                v-for="item in optionsAnswer"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="questionDifficulty" label="题型难度">
                    <el-rate
                            v-model="updateeditForm.questionDifficulty"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                </el-form-item>
                <el-form-item prop="selectPoint" label="分值">
                    <el-input v-model="updateeditForm.selectPoint" type="text" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="judgeFormVisible2 = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit2" :loading="editLoading">保存</el-button>
            </div>
        </el-dialog>

        <br/>
        <!--分页组件 -->
        <el-col :span="24" class="toolbar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </div>
</template>
<script>
    import{
     SelectCourseSection,
     SelectaddCourseSection,
     Selectexam,
     SelectEnterAdd,
     Selectupdate,
     Selectdelete,
     batchUpload,
     downloadModel
     } from '../../api/api'
    import myUpload from '../teacher/public/myUpload.vue';

    export default{
        components:{myUpload},
        data(){
            return {
                tableData4: [],//分页数据
                total: 100,//列表总条数
                pageSize: 15,//每页条数
                currentPage: 1,//当前页码
                listLoading: false,
                options: [], //章节选择数据
                optionsCourse: [],//课程选择数据
                selectValues1: false,//章节选择题
                selectValues2: false,//期末选择题
                //选择录入类型
                optionsTypes: [{
                    value: '1',
                    label: '期末测试'
                },
                    {
                        value: '2',
                        label: '章节测试'
                    },
                    {
                        value: '3',
                        label: '专升本测试'
                    },
                    {
                        value: '4',
                        label: '高升专测试'
                    }],

                //答案
                optionsAnswer: [{
                    value: 'A',
                    label: 'A'
                }, {
                    value: 'B',
                    label: 'B'
                },
                    {
                        value: 'C',
                        label: 'C'
                    },
                    {
                        value: 'D',
                        label: 'D'
                    }],
                searchMessage: '',//模糊查询
                judgeFormVisible2: false,//修改页面
                judgeFormVisible: false,//选择题单独录入页面
                addFormVisible: false,//批量录入
                editLoading: false,
                judgeFormRules: {
                    questionName:[{required:true,message:'题目名称必须填写',trigger:'blur'}],
                    selectA:[{required:true,message:'不能为空',trigger:'blur'}],
                    selectB:[{required:true,message:'不能为空',trigger:'blur'}],
                    selectC:[{required:true,message:'不能为空',trigger:'blur'}],
                    selectD:[{required:true,message:'不能为空',trigger:'blur'}],
                    selectAnswer:[{required:true,message:'不能为空',trigger:'blur'}],
                    selectPoint:[{required:true,message:'不能为空',trigger:'blur'}]
                },

                //增加界面界面

                editForm: {
                    scoreType: '',//试题类型
                    //题库名称
                    questionName: '',
                    //选项一
                    selectA: '',
                    //选项二
                    selectB: '',
                    //选项三
                    selectC: '',
                    //选项四
                    selectD: '',
                    //答案
                    selectAnswer: '',
                    //难度
                    questionDifficulty: '',
                    //分数
                    selectPoint: '',
                    //题库选择
                    selectValues: [],
                    //章节选择
                    sectionId: '',
                    //课程选择
                    courseId:"",
                    //题库类型
                    enterType: '',
                    //题id在更新时候用
                    questionId: '',
                    //题类型1为选择题
                    questionType: 1
                },
                //excel上传

                file: {
                    type: '',//文件类型
                    fileName: '',//文件名
                    fileData: '',

                },
                //新增界面数据
                addForm: {
                    scoreType:'',
                    selectValues: [],
                    courseId:"",
                    questionType:1,
                    sectionId:''
                },
                //修改表单
                updateeditForm: {
                    //题库名称
                    questionName: '',
                    //选项一
                    selectA: '',
                    //选项二
                    selectB: '',
                    //选项三
                    selectC: '',
                    //选项四
                    selectD: '',
                    //答案
                    selectAnswer: '',
                    //难度系数
                    questionDifficulty: '',
                    //分数
                    selectPoint: '',
                    //题库选择
                    selectValues: [],
                    //章节选择
                    sectionId: '',
                    //题库类型
                    enterType: '',
                    //判断题id在更新时候用
                    questionId: '',
                    //评分组件

                },

            }
        },
        methods: {
            //章节测试下拉框选中时候触发事件

            //选择录入类型
            enter(){
                //期末测试
                if (this.editForm.scoreType== 1||this.addForm.scoreType==1) {
                    this.selectValues1 = true;
                    this.selectValues2 = false;

                } else if (this.editForm.scoreType == 2 || this.addForm.scoreType==2) {
                    this.selectValues2 = true;
                    this.selectValues1 = false;

                }else{
                    this.selectValues1 = false;
                    this.selectValues2 = false;
                }
            },
            //添加测试后的保存
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            this.addForm.courseId=this.optionsCourse[0].courseId;
                            let para = Object.assign({}, this.editForm);
                            //期末测试
                            if (this.editForm.scoreType == 1) {
                                Selectexam(para).then((res) => {
                                    this.editLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.judgeFormVisible=false;
                                    this.$refs['editForm'].resetFields();
                                    this.listAll();
                                });
                            }
                            //章节测试
                            if (this.editForm.scoreType == 2) {

                                SelectaddCourseSection(para).then((res) => {
                                    this.editLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.judgeFormVisible=false;
                                    this.$refs['editForm'].resetFields();
                                    this.listAll();
                                });
                            }
                            //增加入学测试
                            if (this.editForm.scoreType == 3 || this.editForm.scoreType == 4) {

                                SelectEnterAdd(para).then((res) => {
                                    this.editLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.judgeFormVisible=false;
                                    this.$refs['editForm'].resetFields();
                                    this.listAll();
                                });
                            }

                        });
                    }

                });
            },
            handleChange(as){
                this.editForm.courseId = as[0];
                this.editForm.sectionId = as[1];
            },

            //添加Excel
            addExcel(){
                this.addFormVisible = true;
                this.file.type = "primary";
                this.file.fileName = "未选择任何文件";
                this.addForm = {

                    scoreType:'',
                    selectValues: [],
                    courseId:this.optionsCourse[0].courseId,
                    questionType:1,
                    sectionId:''
                };
            },
            //导入Excel
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        if (this.file.fileData != '') {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.editLoading = true;
                                let formData = new FormData();
                                formData.append("excelFile", this.file.fileData);
                                formData.append("scoreType", this.addForm.scoreType);
                                formData.append("courseId", this.addForm.courseId);
                                formData.append("sectionId",this.addForm.sectionId);
                                formData.append("questionType",this.addForm.questionType);

                                batchUpload(formData).then((res) => {
                                    this.addLoading = false;
                                    let {resCode} = res;
                                    if (resCode != 0) {
                                        this.$message({
                                            message: '保存失败',
                                            type: 'error'
                                        });

                                    } else {
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['addForm'].resetFields(); //重置 字段
                                        this.editLoading = false;
                                        this.addFormVisible = false;
                                        this.listAll();  //获取页面数据
                                    }

                                });
                            });
                        }

                    }
                });
            },
            /**
             * 选取的文件 参数为文件句柄
             * 获取文件信息
             */
            selectedFile(file){
                this.file.fileName = file.name;
                this.file.type = "success";
                this.file.fileData = file;
                this.file.value=file.value;
                //console.log(file);


            },

            /*2017/8/5 王娇 分页主键跳转*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.listAll();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.listAll();
            },
            //页面数据内容
            listAll(){
                let para = {
                    pageSize: this.pageSize,
                    pageNum: this.currentPage,
                    searchMessage: this.searchMessage
                };
                this.listLoading = true;
                SelectCourseSection(para).then((res) => {
                    this.options = res.resData.listSection;
                    this.optionsCourse = res.resData.listCourse;
                    this.tableData4 = res.resData.page.list;
                    this.total = res.resData.page.total;
                    this.listLoading = false;
                    /*console.log(this.optionsCourse[0].courseId);*/
                });
            },
            //模糊查询,
            search(){
                this.currentPage = 1;
                this.listAll();
                this.searchMessage = "";
            },
            //修改功能
            updateRow(row){
                // alert(row.selectName);
                this.judgeFormVisible2 = true;
                this.updateeditForm = row;
            },
            editSubmit2: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.updateeditForm);
                            Selectupdate(para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.judgeFormVisible2 = false;
                                this.listAll();
                            });
                        });
                    }
                });
            },
            deleteRow(row) {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    // alert(row.questionId)
                    let para = {questionId: row.questionId};
                    Selectdelete(para)
                    this.listAll();
                });
            },
            /*下载模板 2017/8/14 王娇*/
            uploadModel(){
                downloadModel('model.xlsx');
            },
        },
        mounted(){
            this.listAll();
        }

    }

</script>
